<template>
  <!-- 导师列表 -->
  <view class="page">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <view>
      <view
        class="card bg-white flex align-center justify-between"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <view class="flex">
          <image :src="item.img" class="mentorImg" mode="scaleToFill" />
          <view class="mentorPart flex flex-column justify-between">
            <view class="mentorName f-s-36 fw-600">{{ item.name }}</view>
            <view class="mentorBrief f-s-28">{{ item.brief }}</view>
          </view>
        </view>
        <view class="rightPart flex flex-column align-center">
          <image :src="pstar" mode="scaleToFill" class="pstar" />
          <view class="join f-s-24">加入学习</view>
        </view>
      </view>
    </view>
    <view class="footer"></view>
  </view>
</template>

<script>
import navBar from "@/components/navBar";
import pstar from "./img/pstar.png";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      title: "导师列表",
      backgroundColor: "#fff",
      pstar,
      dataList: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          name: "减脂塑形（李老师）",
          brief: "增肌-普拉提-国家健身营养师",
        },
      ],
    };
  },
  onLoad(options) {},
  methods: {},
};
</script>

<style scoped lang="scss">
.card {
  height: 242rpx;
  border-top: 2rpx solid #f0f0f0;
  padding: 0rpx 36rpx;
  .mentorImg {
    width: 144rpx;
    height: 150rpx;
    border-radius: 10rpx;
  }
  .mentorPart {
    padding: 18rpx 0rpx;
    height: 150rpx;
    margin-left: 22rpx;
    .mentorBrief {
      margin-top: 22rpx;
      color: #95949b;
    }
  }
  .pstar {
    width: 46rpx;
    height: 44rpx;
  }
  .join {
    color: #212225;
    margin-top: 12rpx;
  }
}
</style>
